<template>
	<view>
		<!-- 支付金额 -->
		<view class="payNum f-c-b f36">
			<text>支付金额</text>
			<text>￥ {{money}}</text>
		</view>

		<!-- 支付方式 -->
		<view class="payType">
			<view>选择支付方式</view>
			<view class="weixin f-c-b">
				<view class="f-c-c">
					<image class="typeIcon" src="../../static/register/icon_wx.png" mode="widthFix"></image>
					<text>微信支付</text>
				</view>
				<image @click="weixin" class="chooseFlag" :src="weixinFlag?url2:url1" mode="widthFix"></image>
			</view>

			<view class="weixin zhifubao f-c-b">
				<view class="f-c-c">
					<image class="typeIcon" src="../../static/pays/icon_zfb.png" mode="widthFix"></image>
					<text>支付宝支付</text>
				</view>
				<image @click="zhifubao" class="chooseFlag" :src="zhifubaoFlag?url2:url1" mode="widthFix"></image>
			</view>
		</view>

		<view class="btn">
			<button @click="toPay" class="themeBac cwhite">确认支付</button>
		</view>

		<!-- 支付弹框 -->
		<!-- <u-popup border-radius="10" width=70% height="350rpx" v-model="show" mode="center" closeable>
			<view class="u-popup f-co-c">
				<view class="u-popup-title f25">请输入支付密码</view>
				<view class="u-popup-price themeColor">￥ 100.00</view>
				<view class="u-popup-pass">
					<view class="u-popup-pass-type f-c-b f25">
						<text>支付方式</text>
						<text>{{payType==='wx'?'微信':'支付宝'}}</text>
					</view>
					<u-message-input @finish="finish" @change="change" mode="box" :maxlength="maxlength" :value="code" :focus="true" :dot-fill="true" width=55 active-color="#BCBCBC" :breathe="false" >
					</u-message-input>
				</view>
			</view>
		</u-popup> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url1: '../../static/pays/icon_wxz.png',
				url2: '../../static/pays/icon_xz.png',
				payType: "wx",
				weixinFlag: true,
				zhifubaoFlag: false,
				// show: false,
				code: '',
				maxlength:6,
				money:'',
				id:''
			}
		},
		onLoad(e) {
			console.log(e);
			this.money=e.money
			this.id=e.id
		},
		methods: {
			async toPay(id){
				const res= await this.$u.api.losePay({
					consumer:this.vuex_user.id,
					goods:this.id
				})
				console.log(res);
				if(!res.success){
					this.$u.toast(res.msg)
				}
			}
			// weixin() {
			// 	if (!this.weixinFlag) {
			// 		this.weixinFlag = true,
			// 			this.zhifubaoFlag = false,
			// 			this.payType = "wx"
			// 	}
			// },
			// zhifubao() {
			// 	if (!this.zhifubaoFlag) {
			// 		this.zhifubaoFlag = true,
			// 			this.weixinFlag = false,
			// 			this.payType = "zfb"
			// 	}
			// },
			// change(e) {
			// 	console.log('内容改变，当前值为：' + e);
			// },
			// finish(e) {
			// 	console.log('输入结束，当前值为：' + e);
			// },
		}
	}
</script>

<style>
	.payNum {
		border-top: 30rpx solid #D6D6D6;
		border-bottom: 40rpx solid #D6D6D6;
		padding: 30rpx;
		margin-top: 30rpx;
	}

	.payType {
		padding: 20rpx 30rpx;
		border-bottom: 50rpx solid #D6D6D6;
	}

	.weixin {
		padding: 25rpx 0;
	}

	.typeIcon {
		width: 60rpx;
		margin: 0 25rpx;
	}

	.chooseFlag {
		width: 25rpx;
	}

	.zhifubao {
		border-top: 1rpx solid #707070;
	}

	.btn {
		margin: 50rpx 90rpx;
	}

	.u-popup {
		padding: 20rpx;
	}

	.u-popup-title {
		color: #6D6D6D;
	}

	.u-popup-price {
		font-weight: 700;
		font-size: 48rpx;
		margin: 30rpx 0;
	}

	.u-char-box {
		width: 100%;
	}
	
	.u-popup-pass{
		color: #6D6D6D;
		border-top: 1rpx solid #CCCCCC;
		padding-top: 20rpx;
	}
	.u-popup-pass-type{
		margin-bottom: 20rpx;
	}
</style>
